<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="mycard">
        <!-- 上面表单部分 -->
        <div class="formbox">
          <div class="text">
            <!-- 文字链接以及按钮 -->
            <el-row class="col">
              <el-col :span="12">
                <el-link type="danger" disabled>说明:目前支持学科和关键字体关键字筛选</el-link>
              </el-col>
              <el-col class="right" :span="12">
                <el-button class="btn" type="success" icon="el-icon-edit" @click="tonewAdd">新增试题</el-button></el-col
              >
            </el-row>
            <!-- 表单区域,此处采用行内表单 inline属性可以让表单域变为行内的表单域 -->
            <el-form ref="form" label-width="100px" :inline="true" :model="formData" :label-position="labelPosition">
              <el-row class="w">
                <el-col :span="6">
                  <el-form-item label="学科">
                    <el-select @change="requestXQ" v-model="formData.subjectID" placeholder="活动区域">
                      <el-option
                        v-for="item in subJect"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="二级目录">
                    <el-select v-model="formData.catalogID" placeholder="请选择">
                      <el-option
                        v-for="item in subjectMenu"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="标签">
                    <el-select v-model="formData.tags" placeholder="请选择">
                      <el-option v-for="item in tag" :key="item.id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="关键字">
                    <el-input v-model="formData.keyword" placeholder="根据题干搜索" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 试题类型 -->
                <el-col :span="6">
                  <el-form-item label="试题类型">
                    <el-select v-model="formData.questionType" placeholder="请选择">
                      <el-option
                        v-for="(item, index) in questionType"
                        :key="item.index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 难度 -->
                <el-col :span="6">
                  <el-form-item label="难度">
                    <el-select v-model="formData.difficulty" placeholder="请选择">
                      <el-option
                        v-for="(item, index) in difficulty"
                        :key="item.index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 方向 -->
                <el-col :span="6">
                  <el-form-item label="方向">
                    <el-select v-model="formData.direction" placeholder="请选择">
                      <el-option
                        v-for="(item, index) in direction"
                        :key="item.index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="录入人">
                    <el-select v-model="formData.creatorID" placeholder="请选择">
                      <el-option label="管理员" value="管理员"></el-option>
                      <el-option label="超级管理员" value="超级管理员"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="formData.remarks" />
                </el-form-item>
              </el-col>
              <el-form-item label="企业简称">
                <el-input v-model="formData.shortName" />
              </el-form-item>
              <el-form-item class="hh" label="城市">
                <City :value="formData" @input="Ipt"> </City>
              </el-form-item>
              <el-col class="ri" :span="3">
                <el-form-item>
                  <el-button plain @click="reset">清除</el-button>
                  <el-button type="primary" @click="search(formData.keyword, formData.subjectID)">查询</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
        </div>
        <!-- 下面tabs部分 -->
        <div class="tabs">
          <el-tabs desrroy v-model="activeName" @tab-click="handleClick" type="card">
            <div class="info">
              <el-alert type="info"><i class="el-icon-info"></i> 数据一共{{ counts }}条</el-alert>
            </div>
            <el-tab-pane label="全部" name="first"> </el-tab-pane>
            <el-tab-pane label="待审核" name="second"> </el-tab-pane>
            <el-tab-pane label="已审核" name="third"> </el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"> </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格区域 -->
        <div>
          <el-table :data="examList" style="width: 100%" max-height="380">
            <el-table-column prop="number" label="试题编号" width="150px"> </el-table-column>
            <el-table-column prop="subject" label="学科" width="150px"> </el-table-column>
            <el-table-column prop="catalog" label="目录" width="150px"> </el-table-column>
            <el-table-column :formatter="def" label="题型" prop="questionType" width="150px"> </el-table-column>
            <el-table-column label="题干" width="150px">
              <template slot-scope="{ row }">
                {{ row.question | html2Text }}
              </template>
            </el-table-column>
            <el-table-column width="150px" label="录入时间">
              <template slot-scope="{ row }">
                {{ row.addDate | parseTimeByString }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="150px">
              <template slot-scope="{ row }">
                <!-- 格式化难度,此处采用数组的find方法-->
                <!-- 从difficulty寻找与当前项一样的值,找到了则返回difficulty的label项 -->
                <!-- 此处因为类型问题,需要隐式转换 -->
                {{ difficulty.find(item => item.value === +row.difficulty).label }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="150px"> </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="150px" :formatter="statas"> </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150px"> </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="150px"> </el-table-column>
            <el-table-column prop="chkState" :formatter="fabu" label="发布状态" width="150px"> </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="300px">
              <template slot-scope="{ row }">
                <el-button type="text" @click="look(row)">
                  预览
                </el-button>
                <!-- 不等于0的情况下证明已审核，此时将按钮禁用 -->
                <el-button type="text" :disabled="row.chkState !== 0" @click="audit(row.id)">
                  审核
                </el-button>
                <!--   修改，,跳转到试题录入即可-->
                <el-button type="text" @click="$router.push(`/questions/new/?id=${row.id}`)">
                  修改
                </el-button>
                <!-- 按钮动态显示：1上架 0下架 -->
                <el-button type="text" @click="put(row)"> {{ row.publishState == 0 ? '下架' : '上架' }} </el-button>
                <!-- 如果试题已上架状态为1，删除按钮要禁用 -->
                <el-button :disabled="row.publishState == 1" type="text" @click="del(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 预览组件 -->
          <Look ref="mylook" :dialogVisible.sync="dialogVisible" />
          <!-- 审核组件 -->
          <Audit ref="myaudit" :lookVisible.sync="lookVisible"></Audit>
        </div>
        <!-- 分页区域 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="q.page"
            :page-sizes="[1, 3, 7, 10]"
            :page-size="q.pagesize"
            layout="total, prev,sizes,pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction, chkType, publishType } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simples } from '@/api/hmmm/directorys.js'
import { simple as simPles } from '@/api/hmmm/tags.js'

export default {
  components: {
    Look: () => import('@/module-hmmm/components/questions-preview.vue'),
    Audit: () => import('@/module-hmmm/components/questions-check.vue'),
    City: () => import('@/module-hmmm/pages/companys/citys.vue')
  },
  data () {
    return {
      // 存储表单数据
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城市
        province: '' // 企业所在地省份
      },
      labelPosition: 'right', // 表单对齐方式
      activeName: 'first', // tabs切换
      examList: [], // 存储试题列表
      q: {
        page: 1, // 页码值
        pagesize: 5, // 条数
        chkState: null // 审核状态
      },
      counts: 0, // 总条数
      difficulty: difficulty, // 难度
      questionType: questionType, // 题型
      direction: direction, // 方向
      subJect: [], // 学科简单列表
      subjectMenu: [], // 学科目录
      tag: [], // 学科标签
      datas: [], // 企业所在城市
      dialogVisible: false, // 预览对话框
      lookVisible: false // 审核对话框
    }
  },
  created () {
    this.requestTiKu()
    this.requestSubject()
  },
  methods: {
    // 请求基础题库数据
    async requestTiKu () {
      const res = await choice(this.q)
      this.examList = res.data.items
      this.counts = res.data.counts
    },
    // 每页多少条发生变化时
    handleSizeChange (val) {
      this.q.pagesize = val
      this.requestTiKu()
    },
    // 当前页码值发生变化时
    handleCurrentChange (val) {
      this.q.page = val
      this.requestTiKu()
    },
    // tab切换对应操作
    /*  async handleClick(targetName, action) {
      if (this.activeName === 'first') {
        // 此处执行调用全部精选题库逻辑
        this.q.chkState = null
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      } else if (this.activeName === 'second') {
        // 此处执行待审核精选题库逻辑
        this.q.chkState = 0
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      } else if (this.activeName === 'third') {
        // 此处执行已审核精选题库逻辑
        this.q.chkState = 1
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      } else {
        // 此处执行状态为已拒绝精选题库逻辑
        this.q.chkState = 2
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      }
    }, */
    async handleClick (targetName, action) {
      if (this.activeName === 'first') {
        // 此处执行调用全部精选题库逻辑
        this.q.chkState = null
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      } else if (this.activeName === 'second') {
        // 此处执行待审核精选题库逻辑
        this.q.chkState = 0
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      } else if (this.activeName === 'third') {
        // 此处执行已审核精选题库逻辑
        this.q.chkState = 1
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      } else {
        // 此处执行状态为已拒绝精选题库逻辑
        this.q.chkState = 2
        const res = await choice(this.q)
        this.examList = res.data.items
        this.counts = res.data.counts
      }
    },
    // 点击新增时跳转到新增页面
    tonewAdd () {
      this.$router.push('/questions/new')
    },
    // 获取到学科详情渲染表单
    async requestSubject () {
      const res = await simple()
      this.subJect = res.data
    },
    // 获取到学科详情渲染二级目录,渲染前要判断学科内是否有值
    async requestXQ (id) {
      this.formData.catalogID = []
      this.formData.tags = []
      // 如果formData.subjectID有值，才去发起请求获取二级目录以及标签下拉项
      if (this.formData.subjectID) {
        // 根据当前学科的id去获取对应的二级目录
        const res = await simples({ subjectID: id })
        this.subjectMenu = res.data
        const res1 = await simPles({ subjectID: id })
        this.tag = res1.data
      } else {
        // 如果formData.subjectID没有值，那么二级目录和标签选项默认为空
        this.formData.catalogID = null
        this.formData.tags = null
      }
    },
    // 城市的数据 ！
    Ipt (value) {
      this.formData.province = value.province
      this.formData.city = value.city
    },
    // 格式化题型,此处一样采用element-uiformatter方法
    def (row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化审核状态,此处一样采用element-uiformatter方法
    statas (row, column, cellValue, index) {
      // const obj = chkType.find(item => item.value === cellValue)
      // 此处要自己做判断 因为枚举里的数据与接口有出入
      if (cellValue === 0 || cellValue === '0') {
        return '待审核'
      } else if (cellValue === 1 || cellValue === '1') {
        return '通过'
      } else {
        return '已拒绝'
      }
      // return obj ? obj.label : '未知'
    },
    // 格式化发布状态,此处一样采用element-uiformatter方法
    fabu (row, column, cellValue, index) {
      const obj = publishType.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    // 点击预览通过题型状态打开对应对话框,并且传递点击项id
    async look (row) {
      this.dialogVisible = true
      const res = await detail({ id: row.id })
      this.$refs.mylook.form = res.data
    },
    // 点击审核，打开对话框，做出相应操作
    audit (id) {
      this.lookVisible = true
      // 把点击的对应项id传递给子组件，由子组件进行对应操作
      this.$refs.myaudit.form.id = id
      this.requestTiKu()
    },
    // 点击上下架按钮做出对应操作，如果是上架则改为下架，反之同理publishState
    async put (row) {
      const result = await this.$confirm(
        `此操作将永久${row.publishState === 1 ? '下架' : '上架'} 该文件, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (result !== 'confirm') return
      // 执行上下架请求逻辑,publishState等于0就让它等于1，反之同理
      row.publishState = row.publishState === 0 ? 1 : 0
      const res = await choicePublish(row)
      if (res.status === 200) this.$message.success('操作成功')
      // 刷新列表数据
      this.requestTiKu()
    },
    // 删除
    async del (row) {
      const res = await remove(row)
      if (res.status === 200) this.$message.success('删除成功')
      this.requestTiKu()
    },
    // 点击搜索时点击了学科之后根据关键字(此处的关键字为表单里的题干)筛选对应数据
    async search (keyword, value) {
      const res = await choice({ subjectID: value })
      this.examList = res.data.items
      // 定义新数组存储最后得到的数据
      const newList = []
      this.examList.forEach(item => {
        if (item.question.indexOf(keyword) !== -1) {
          newList.push(item)
        } else {
          this.examList = []
        }
      })
      return (this.examList = newList)
    },
    // 清除表单数据
    reset () {
      this.formData = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  text-align: right;
}
.col {
  margin-bottom: 20px;
}
.ri {
  float: right;
}
.info {
  margin-bottom: 20px;
}
.block {
  float: right;
  margin-top: 20px;
}
</style>
